<template>
  <avue-crud ref="crud"
             :data="data"
             :option="option"></avue-crud>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      data: [],
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name',
          }, {
            label: '性别',
            prop: 'sex'
          }, {
            label: '省份',
            prop: 'province',
            type: 'select',
            cascader: ['city'],
            cascaderIndex: 1,
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getProvince`
          },
          {
            width: 120,
            label: '城市',
            prop: 'city',
            type: 'select',
            cascader: ['area'],
            cascaderIndex: 1,
            cell: true,
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getCity/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择城市',
                trigger: 'blur'
              }
            ]
          },
          {
            width: 120,
            label: '地区',
            prop: 'area',
            cell: true,
            props: {
              label: 'name',
              value: 'code'
            },
            type: 'select',
            dicUrl: `${baseUrl}/getArea/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.data = [
      {
        name: '张三',
        sex: '男',
        province: '110000',
        city: '110100',
        area: '110101',
      }, {
        name: '李四',
        sex: '女',
        province: '130000',
        city: '130200',
        area: '130202',
      }
    ]
    this.$nextTick(() => {
      //放在数据加载完后执行
      this.$refs.crud.dicInit('cascader');
    })
  }
}
</script>